<template>
	<div class="background-image">
		<el-container>
			<el-aside style="height: 600px; width: 240px;">
				<el-row>
					<el-col>
						<div>
							<img style="height: 90px;width: 90px; margin-left: 90px;margin-top: 50px; border-radius: 50%;"
								:src="you.user_tx" /><br />
							<p style="margin-left: 120px;"><span
									style="font-size: 20px;color:gray;">{{you.user_name}}</span></p>
						</div>
						<!-- 调整 el-menu 的样式 -->
						<el-menu style="height: calc(100% - 100px); width: calc(100% - 50px); margin-left: 50px;"
							active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
							default-active="2" text-color="#fff" @open="handleOpen" @close="handleClose">
							<el-menu-item index="1">
								<el-icon><icon-menu /></el-icon>
								<el-button @click="doList">用户信息</el-button>
							</el-menu-item>
							<el-menu-item index="2">
								<el-icon><icon-menu /></el-icon>
								<el-button style="width: 90px;" @click="doList1">帖子</el-button>
							</el-menu-item>

						</el-menu>
					</el-col>
				</el-row>
			</el-aside>
			<el-main>
				<!-- 路由显示区 -->
				<router-view></router-view>
			</el-main>
		</el-container>
	</div>

</template>

<script lang="ts" setup>
	import axios from 'axios';
	import { onMounted, ref } from 'vue';
	const you = ref({
		user_name: '',
		user_tx: '',
	});
	const user = ref({
		user_id: ''
	})
	const doList2 = () => {
		try {
			user.value.user_id = window.location.search.split('?')[1].split('=')[1]
		} catch (e) {
			user.value.user_id = ''
		}
		axios({
			url: '/api/user/selectUser/' + user.value.user_id,
			method: 'get',
		}).then((response) => {
			you.value = response.data;
			you.value.user_tx = "/api/src/images/" + you.value.user_tx;


			// 跳转到用户信息页面
			console.log("赶回成功")
			console.log(response.data)

		})

	};
	//用户信息
	const doList = () => {
		location.href = "/pagesIndex/yongHu/xingXi?user_id=" + user.value.user_id;
	};
	//论坛中心
	const doList1 = () => {
		location.href = "/pagesIndex/yongHu/lunTan?music_user_id=" + user.value.user_id;
	};
	onMounted(() => {
		doList2()
	})
	// 菜单栏
	const handleOpen = (key : string, keyPath : string[]) => {
		console.log(key, keyPath)
	}
	const handleClose = (key : string, keyPath : string[]) => {
		console.log(key, keyPath)
	}
</script>

<style scoped>
	aa {
		text-decoration: none;
		color: white;
	}

	a:hover {
		color: red;
	}

	.background-image {
		margin-top: 50px;
		width: 100vw;
		/* 视口宽度 */
		height: 100vh;
		/* 视口高度 */
		position: fixed;
		/* 固定定位 */
		top: 0;
		left: 0;
		z-index: -1;
		/* 如果有其他内容，确保背景图在它们下面 */
		background-image: url('../../../assets/beijin.jpeg');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}
</style>